<template>
  <div>
    <!-- <van-button @click="onClickCancel">取消</van-button>
    <van-button @click="onClickConfirm">确认</van-button> -->

    <van-nav-bar
      title=""
      left-text="取消"
      right-text="确认"
      @click-left="onClickCancel"
      @click-right="onClickConfirm"
    />

    <!-- <van-nav-bar
      title=""
      left-text="返回"
      right-text="按钮"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    /> -->

    <form action="/">
      <van-search
        v-model="searchText"
        placeholder="搜索"
        @search="onClickSearch"
      />
    </form>

    <van-picker
      ref="refPicker"
      :default-index="defaultIndex"
      :columns="columns2"
      @confirm="handleConfirm"
    >
      <template #option="item"> {{ item.name }} </template>
      <template #columns-top>
        <van-button @click="onClickSetNull">置空</van-button>
      </template>
    </van-picker>
  </div>
</template>

<script>
export default {
  name: 'SearchPicker',
  components: {},
  mixins: [],

  props: {
    defaultIndex: { type: Number, default: 0 },
    columns: { type: Array, default: () => [] }
  },

  data() {
    return {
      searchText: ''
    }
  },

  computed: {
    columns2() {
      return this.columns.map(item => {
        return { id: item[0], name: item[1] }
      })
    }
  },

  created() {},

  methods: {
    onClickSearch(value) {
      this.$emit('search', value)
    },

    onClickCancel() {
      this.$emit('cancel')
    },

    onClickSetNull() {
      this.$emit('confirm', false)
    },

    onClickConfirm() {
      this.$refs.refPicker.confirm()
    },

    handleConfirm(item, index) {
      this.$emit('confirm', [item.id, item.name], index)
    }
  }
}
</script>

<style scoped></style>
